<template>
  <div>
    <NavBarTitle :NavBarTitle="NavBarTitle" />
    <div
      class="relative overflow-hidden bg-white mt-40 mx-16 pt-50 px-40 pb-30"
    >
      <img
        class="absolute w-full h-full top-0 left-0"
        src="../../assets/img/wallte_bg_green.png"
      />
      <div class="relative">
        <div class="font-30 leading-1 text-white font-medium" style="display: flex;justify-content: space-between;">
          <div>分销账户卡</div>
          <div style="text-decoration: underline;font-size: 12px;" @click="popupShow = true">分销规则</div>
        </div>
        <div style="display: flex;justify-content: space-around;">
          <div class="mt-20 leading-1 text-white font-medium">
            <div style="text-align: center;">
              <span>¥</span>
              <span class="font-60">{{ way_balance }}</span>
            </div>
            <div style="margin-right: 4px;text-align: center;">未到账</div>
          </div>
          <div class="mt-20 leading-1 text-white font-medium">
            <div style="text-align: center;">
              <span>¥</span>
              <span class="font-60">{{ balance }}</span>
            </div>
            <div style="margin-right: 4px;text-align: center;">可提现</div>
          </div>
        </div>
        <div class="mt-40 mb-30 leading-1 text-right text-white">
          <van-button
            icon="cash-back-record-o"
            type="primary"
            size="mini"
            @click="showMoenyDialog()"
            >提现</van-button
          >
        </div>
      </div>
    </div>
    <van-tabs v-model="status" color="#0fa1a0" swipeable animated>
      <div class="w-full">
        <van-tab title="审核中" :name="10">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                v-for="item in list"
                :key="item.id"
                class="justify-between items-center content-box"
              >
                <div>
                  <div class="title">
                    {{ item.type == 10 ? "获得佣金" : "提现余额扣除" }}
                  </div>
                  <div class="time-style">
                    {{ timeStampTurnTime(item.updated_at) }}
                  </div>
                </div>
                <div>
                  <div
                    class="money-t items-center"
                    :class="item.type == 10 ? 'tadd' : 'tedt'"
                  >
                    <span class="symbol">{{
                      item.type == 10 ? "+" : "-"
                    }}</span>
                    <span>{{ item.money }}</span>
                  </div>
                  <div class="balance">余额: {{ item.after_money }}</div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="到账中" :name="20">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                v-for="item in list"
                :key="item.id"
                class="justify-between items-center content-box"
              >
                <div>
                  <div class="title">
                    {{ item.type == 10 ? "获得佣金" : "提现余额扣除" }}
                  </div>
                  <div class="time-style">
                    {{ timeStampTurnTime(item.updated_at) }}
                  </div>
                </div>
                <div>
                  <div
                    class="money-t items-center"
                    :class="item.type == 10 ? 'tadd' : 'tedt'"
                  >
                    <span class="symbol">{{
                      item.type == 10 ? "+" : "-"
                    }}</span>
                    <span>{{ item.money }}</span>
                  </div>
                  <div class="balance">余额: {{ item.after_money }}</div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh></van-tab
        >
        <van-tab title="已到账" :name="30">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                v-for="item in list"
                :key="item.id"
                class="justify-between items-center content-box"
              >
                <div>
                  <div class="title">
                    {{ item.type == 10 ? "获得佣金" : "提现余额扣除" }}
                  </div>
                  <div class="time-style">
                    {{ timeStampTurnTime(item.updated_at) }}
                  </div>
                </div>
                <div>
                  <div
                    class="money-t items-center"
                    :class="item.type == 10 ? 'tadd' : 'tedt'"
                  >
                    <span class="symbol">{{
                      item.type == 10 ? "+" : "-"
                    }}</span>
                    <span>{{ item.money }}</span>
                  </div>
                  <div class="balance">余额: {{ item.after_money }}</div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh></van-tab
        >
        <van-tab title="审核拒绝" :name="40">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div
                v-for="item in list"
                :key="item.id"
                class="justify-between items-center content-box"
              >
                <div>
                  <div class="title">
                    {{ item.type == 10 ? "获得佣金" : "提现余额扣除" }}
                  </div>
                  <div class="time-style">
                    {{ timeStampTurnTime(item.updated_at) }}
                  </div>
                </div>
                <div>
                  <div
                    class="money-t items-center"
                    :class="item.type == 10 ? 'tadd' : 'tedt'"
                  >
                    <span class="symbol">{{
                      item.type == 10 ? "+" : "-"
                    }}</span>
                    <span>{{ item.money }}</span>
                  </div>
                  <div class="balance">余额: {{ item.after_money }}</div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh></van-tab
        >
      </div>
    </van-tabs>
    <van-dialog
      v-model="show"
      confirmButtonText="申请提现"
      confirmButtonColor="#0fa1a0"
      title="提现申请"
      show-cancel-button
      @confirm="confirm"
    >
      <div class="input-style">
        <van-field
          v-model="money"
          input-align="right"
          left-icon="balance-o"
          border
          clearable
          type="“number"
          label="提现金额"
          placeholder="请输入金额"
        />
      </div>
    </van-dialog>
    <van-popup
      v-model="popupShow"
      round
      close-on-popstate
      :close-on-click-overlay="false"
      overlay-class="buyor-popup-style"
      position="center"
    >
      <div class="buor-style">
        <div class="buor-title">分销规则</div>
        <div class="txt-style" v-html="txt"></div>
        <div class="btn-style">
          <van-button
            style="width: 100%"
            color="#0fa1a0"
            size="small"
            @click="popupShow = false"
            >我已知晓
            </van-button
          >
        </div>
      </div>
    </van-popup>
    <Loading :isLoading="isLoading" />
  </div>
</template>
<script>
import NavBarTitle from "components/NavBarTitle.vue";
import Loading from "components/Loading.vue";
import { Dialog } from "vant";
import { rebate, withdrawal, rebatenotice } from "@/api/withdraw";
export default {
  data() {
    return {
      NavBarTitle: "账户余额",
      balance: 0,
      way_balance: 0,
      page: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      isLoading: true,
      // 弹窗
      show: false,
      popupShow: false,
      // 状态
      status: 10,
      // 提现金额
      money: undefined,
      // 分销规则
      txt: ''
    };
  },
  watch: {
    status(val) {
      this.onRefresh();
    },
  },
  methods: {
    // 获取分销规则
    getRebatenotice(){
      const data = {
        token: this.$store.state.token
      };
      rebatenotice(data).then((res) => {
        if (res.data.flag) {
          this.txt = res.data.data;
        } else {
          this.$toast.fail(res.data.msg);
        }
      });
      
    },
    // 发起提现
    confirm() {
      const data = {
        token: this.$store.state.token,
        money: this.money,
      };
      withdrawal(data).then((res) => {
        if (res.data.flag) {
          this.show = false;
          this.$toast.success("申请成功");
          this.onRefresh();
          this.getUserInfo();
        } else {
          this.$toast.fail(res.data.msg);
        }
      });
    },
    // 打开提现弹窗并复制
    showMoenyDialog() {
      // if (this.balance <= 0) return this.$toast.fail("余额不足");
      this.moeny = Number(JSON.parse(JSON.stringify(this.balance)));
      this.show = true;
    },
    onRefresh() {
      this.finished = false;
      this.page = 0;
      this.list = [];
      this.loading = true;
      this.onLoad();
    },
    onLoad() {
      this.loading = true;
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.page++;
      let data = {
        token: this.$store.state.token,
        status: this.status,
        page: this.page,
        limit: 10,
      };
      rebate(data)
        .then((res) => {
          if (res.data.flag) {
            if (res.data.data.data.length > 0) {
              for (let i = 0; i < res.data.data.data.length; i++) {
                this.list.push(res.data.data.data[i]);
              }
              this.loading = false;
            } else if (res.data.data.data.length == 0) {
              this.finished = true;
            }
          } else {
            this.$toast(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取用户余额
    getUserInfo() {
      const data = {
        token: this.$store.state.token,
      };
      this.$axios
        .post(this.$index + this.$api.user.personal, this.$Qs.stringify(data))
        .then((res) => {
          console.log(res);
          if (res.data.flag) {
            this.balance = res.data.data.balance;
            this.way_balance = res.data.data.way_balance || '0.00';
            this.isLoading = false;
          } else {
            this.$toast.fail(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 时间戳转日期格式
     *
     */
    timeStampTurnTime(timeStamp, type = "") {
      if (timeStamp != undefined && timeStamp != "" && timeStamp > 0) {
        var date = new Date();
        date.setTime(timeStamp * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        var h = date.getHours();
        h = h < 10 ? "0" + h : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? "0" + minute : minute;
        second = second < 10 ? "0" + second : second;
        if (type) {
          return y + "-" + m + "-" + d;
        } else {
          return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
        }
      } else {
        return "";
      }
    },
  },
  components: {
    NavBarTitle,
    Loading,
    [Dialog.name]: Dialog,
  },
  created() {
    this.getUserInfo();
    this.getRebatenotice();
  },
};
</script>
<style scoped>
.btn-style {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #ffffff);
  height: 60px;
  line-height: 60px;
}
.buyor-popup-style {
  height: 50%;
}
.buor-style {
  width: 240px;
  margin: 0 15px;
}
.buor-title{
  margin-top: 12px;
  text-align: center;
  font: 18px;
  font-weight: bold;
}
.txt-style {
  padding: 15px 0;
  height: 300px;
  overflow-y: scroll;
}
.txt-style::-webkit-scrollbar {
  width: 0.5em;
  background-color: transparent;
}

.txt-style::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.txt-style::-webkit-scrollbar-track {
  background-color: transparent;
}
.input-style {
  /* width: 120px; */
  padding: 12px 20px;
}
.symbol {
  font-size: 18px;
  padding-bottom: 12px;
  margin-right: 4px;
}
.tadd {
  color: #0fa1a0;
}
.tedt {
}
.justify-between {
  display: flex;
  justify-content: space-between;
}
.items-center {
  align-items: center;
}
.balance {
  color: #999;
}
.content-box {
  margin-left: 20px;
  padding: 16px 20px 16px 0;
  border-bottom: 1px solid #eaeaea;
}
.money-t {
  font-size: 18px;
  margin-bottom: 4px;
}
.title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 8px;
}
.time-style {
  font-size: 12px;
  color: #999;
}
.relative {
  position: relative;
}
.text-right {
  text-align: right;
}
.absolute {
  position: absolute;
}
.overflow-hidden {
  overflow: hidden;
}
.opacity-60 {
  opacity: 0.6;
}
.px-40 {
  padding-left: 20px;
  padding-right: 20px;
}
.mt-30 {
  margin-top: 15px;
}
.mb-30 {
  margin-bottom: 15px;
}
.mt-20 {
  margin-top: 10px;
}
.font-60 {
  font-size: 30px;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.top-0 {
  top: 0;
}
.left-0 {
  left: 0;
}
.font-30 {
  font-size: 15px;
}
.text-white {
  color: #fff;
}
.bg-white {
  background-color: #fff;
}
.mt-40 {
  margin-top: 20px;
}
.mx-16 {
  margin-left: 8px;
  margin-right: 8px;
}
.pt-50 {
  padding-top: 25px;
}
.pb-30 {
  padding-bottom: 15px;
}
</style>